<template>
  <!-- 1. 获取仓库的数据 -->
  <h1>{{ $store.state.username }}</h1>
  <h2>{{ name }}</h2>
  <!-- 2. 调用 commit 立即修改  -->
  <button @click="$store.commit('setUserName', '小马')">点击立刻改名</button>
  <button @click="btn">点击立刻改名2</button>
  <hr />
  <!-- 3. 调用 dispatch 异步操作成功后修改 -->
  <button @click="$store.dispatch('setUserNameSync')">
    点击请求成功后，改名(异步)
  </button>
  <button @click="btnSync">点击请求成功后，改名(异步)</button>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    // 🔔 Vuex 也为组合API提供了一个 useStore 函数，用于访问仓库的
    const store = useStore()
    // console.log(store)
    // 1. 获取仓库的数据
    console.log('从仓库中取出来的用户名', store.state.username)
    // toRef 保留原来的 store.state 关联
    // 🔔 主要要获取到一个值，还是要注意处理响应式对象
    // 方案1：用 toRef()
    // const name = toRef(store.state, 'username')
    // console.log(name) // ObjectRefImpl

    // 方案2：用 computed()
    const name = computed(() => store.state.username)
    console.log(name) // ComputedRefImpl

    // 2. 调用 commit 立即修改
    const btn = () => {
      store.commit('setUserName', '小小马')
    }

    const btnSync = () => {
      store.dispatch('setUserNameSync')
    }

    return { name, btn, btnSync }
  }
  // computed: {
  //   name () {
  //     return this.$store.state.username
  //   }
  // }
}
</script>
